<template>
	<div @click="barclick" class="bar">
		<div class="baritem">
			<!-- <div class="`false?noactive:active`">
				<slot name='img'></slot>
			</div> -->
			<div class="noactive" v-if='!Active'>
				<slot name='img'></slot>
			</div>
			<div class="yesactive" v-else>
				<slot name='img2'></slot>
			</div>
		</div>
		<div class="bar" :style='textactivecolor'>
			<slot name='text'></slot>
		</div>
	</div>	
</template>
<script>
	export default {
		name:'Bar',
		props:{
			path:String,
			activeColor:{
				type:String,
				default:'red'
			}
		},
		data (){
			return {
				
			}
		},
		mounted() {
			//console.log(this.$route)
		},
		methods:{
			barclick:function(){
				this.$router.push(this.path)
				//console.log(this.$router)
				//console.log(this.$route)
			}
		},
		computed:{
			//计算是否处于活跃的状态，ACtive就是最后的结果
			//indaxOf（）函数，把参数和前面的数组做搜索，对象里没有这个参数就返回-1；
			//$route获得活跃状态路由的某个对象。这个对象里有path、query、params
			Active (){
				return this.$route.path.indexOf(this.path) != -1
			},
			//把得到结果的方法提取到计算属性里来做，并返回结果；这个结果可以是表达式
			textactivecolor () {
				return this.Active ? {color:this.activeColor}:{}
			}
		}
	}
</script>
<style scoped>
	.bar {
		text-align: center;
	}
	.noactive {
		color: #000000;
	}
	.yesactive {
		color: #FF0000;
	}
</style>